<template>
  <view class="mine_warp">
	  <!-- 最上面的语言切换 -->
	<view class="mine_header_warp">
		<view class="mine_header_image_warp">
			<!-- <up-image src="/static/comm/icon_xx_h.png" width="26" height="26" bgColor="#f1f6ff00"></up-image> -->
			<!-- <view  style="margin-left: 10rpx;">
				<up-image src="/static/comm/icon_yy.png" width="26" height="26" bgColor="#f1f6ff00"></up-image>
			</view> -->
			<Language style="margin-left:40rpx;" imageType="h"/>
		</view>
	</view>
	<!-- 个人信息 -->
	<view class="mine_info_warp">
		<view class="mine_info_left_warp">
			<up-image :src="userData.avatarUrl || '/static/logo.png'" width="60" height="60" bgColor="#f1f6ff00" shape="circle"></up-image>
			<view class="_info_content_warp">
				<view class="_info_content_title_warp">{{userData.name || $t('common.no')}}</view>
				<view class="_info_content_invitation">
					<text>{{$t('mine.invitation.code')}}：</text>
					<text>{{userData.inviteCode || $t('common.no')}}</text>
					<view style="margin-left: 20rpx;">
						<up-image src="/static/comm/copy.png" width="14" height="14" bgColor="#f1f6ff00" @click="copyData(userData.inviteCode)"></up-image>
					</view>
				</view>
				<view class="_info_content_msg_warp">{{userData.email || $t('common.no')}}</view>
			</view>
		</view>
		<up-image src="/static/comm/right_3.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle" @click="jumpPersonalInfo"></up-image>
	</view>
	<!-- 我的余额 -->
	<view class="mine_balance_warp">
		<view class="_balance_header">
			<view class="_balance_header_amount">
				<view>{{$t("common.my.balance")}}</view>
				<view style="margin: 10rpx 0 0 20rpx;">
					<up-image v-if="balanceShow" src="/static/comm/xs.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="balanceShow=false;"></up-image>
					<up-image v-else src="/static/comm/yc.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="balanceShow=true;"></up-image>
				</view>
			</view>
			<view class="_balance_header_but" @click="jumpRecharge">{{$t("common.recharge")}}</view>
		</view>
		<view class="_balance_header ">
			<view class="_balance_amount" v-if="balanceShow">
				<view style="font-size: 72rpx;">{{balanceData}}</view>
				<view style="margin-left: 10rpx;">USDT</view>
			</view>
			<view class="_balance_amount" v-else>*******</view>
			<view class="_balance_header_but _balance_content_but" @click="jumpBalance">{{$t('mine.transfer')}}</view>
		</view>
	</view>
	<!-- 其他功能 -->
	<view class="other_warp">
		<view class="other_title">{{$t('mine.other.functions')}}</view>
		<view class="other_function">
			<view class="other_function_item" v-for="item in otherList" :key="item.id" @click="jumpInfo(item)">
				<view class="function_item_left">
					<view style="margin-top: 10rpx;">
						<up-image :src="item.src" width="18" height="18" bgColor="#f1f6ff00" mode="widthFix"></up-image>
					</view>
					<view class="function_item_left_title">{{item.name}}</view>
				</view>
				<up-image src="/static/comm/right_1.png" width="16" height="16" bgColor="#f1f6ff00" mode="widthFix" ></up-image>
			</view>
		</view>
	</view>
	
	<view class="logout-warp">
		<view class="but_comm_warp" @click="logOut">
			{{$t('mine.logout.but')}}
		</view>
	</view>
	
	<!-- 温馨提示 -->
	<up-modal :show="openShow" :showConfirmButton = "false">
		<view class="slot-content">
			<view class="close_warp" @click="openShow=false;">
				<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
			</view>
			<view class="content_">
				<view class="content_1">{{$t("common.warm.reminder")}}</view>
				<view class="content_2">{{$t("mine.logout.content")}}</view>
			</view>
			<view class="but_">
				<view class="but_copy" @click="OKFun">{{$t("common.confirm")}}</view>
				<view class="but_close" @click="openShow=false;">{{$t("common.cancel")}}</view>
			</view>
		</view>
	</up-modal>
	
  </view>
</template>

<script>
	import { getAcctBalance } from '@/api/finance.js';
	import { getStorageFun,USER_DATA,clear } from '@/utils/auth.js';
	import { copyData } from '@/utils/index.js';
	import Language from '@/components/language.vue';
		
	export default {
		components:{Language},
		data() {
			return {
				userData:{},
				balanceShow:true,
				otherList:[
					{
						id:8,
						name:this.$t('mine.other.functions.invite.friends'),
						src:"/static/mine/icon_yq.png",
						path:"/pages/invite_friends/invite_friends"
					},{
						id:1,
						name:this.$t('mine.other.functions.team'),
						src:"/static/mine/icon_td.png",
						path:"/pages/myTeam/myTeam"
					},{
						id:2,
						name:this.$t('mine.other.functions.safety.center'),
						src:"/static/mine/icon_aqzx.png",
						path:"/pages/safety_center/safety_center"
					},{
						id:9,
						name:this.$t('mine.card.transfer.record.title'),
						src:"/static/mine/icon_kzzjl.png",
						path:"/pages/card_transfer_record/card_transfer_record"
					},{
						id:3,
						name:this.$t('mine.other.functions.transaction.details'),
						src:"/static/mine/icon_jymx.png",
						path:"/pages/transaction_details/transaction_details",
					},{
						id:4,
						name:this.$t('mine.other.functions.cardholder'),
						src:"/static/mine/icon_ckr.png",
						path:"/pages/cardholder/cardholder"
					},{
						id:8,
						name:this.$t('mine.other.functions.bind.card'),
						src:"/static/mine/icon_jymx.png",
						path:"/pages/bind_physical_card/bind_physical_card"
					},
					// {
					// 	id:5,
					// 	name:this.$t('mine.other.functions.clear.cache'),
					// 	src:"/static/mine/icon_qchc.png",
					// },
					{
						id:6,
						name:this.$t('mine.other.functions.about.us'),
						src:"/static/mine/icon_gywm.png",
						path:"/pages/about_us/about_us"
					},{
						id:7,
						name:this.$t('mine.other.functions.account.cancel'),
						src:"/static/mine/icon_zxzh.png",
					},
				],
				balanceData:0,// 我的余额
				openShow:false,
				openShow2:false,
			}
		},
		onShow() {
			this.userData = getStorageFun(USER_DATA);
			this.getAcctBalanceFun();
		},
		methods: {
			copyData,
			jumpInfo(item) {
				if(item && item.path){
					uni.navigateTo({
						url:item.path,
					})
				}else if(item.id === 7){
					// 注销账号
					this.openShow = true;
				}
			},
			jumpPersonalInfo(){
				uni.redirectTo({
					url:"/pages/edit_personal_info/edit_personal_info",
				})
			},
			jumpRecharge(){
				uni.navigateTo({
					url:"/pages/recharge/recharge",
				})
			},
			jumpBalance(){
				uni.navigateTo({
					url:"/pages/balance_transfer/balance_transfer",
				})
			},
			/**
			 * 查询充值余额
			 */
			async getAcctBalanceFun(){
				const resp = await getAcctBalance();
				if(resp && resp.bizcode === 100){
					this.balanceData = resp.data;
				}
			},
			/**
			 * 注销账号
			 */
			OKFun(){
				this.openShow = false;
				clear();
				uni.navigateTo({
					url:"/pages/login/login",
				})
			},
			/**
			 * 退出登录
			 */
			logOut(){
				clear();
				uni.navigateTo({
					url:"/pages/login/login",
				})
			}
		}
	}
</script>

<style lang="scss">
  .mine_warp {
	padding: 110rpx 30rpx 30rpx;
	font-family: PingFang SC;
	.mine_header_warp{
		display: flex;
		justify-content: flex-end ;
		align-items: center;
		.mine_header_image_warp{
			display: flex;
		}
	}
	._balance_content_but{
		margin-top: 54rpx;
		height: 36rpx;
	}
	
	.mine_info_warp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.mine_info_left_warp{
			display: flex;
			align-items: center;
		}
		._info_content_warp{
			margin-left: 20rpx;
		}
		._info_content_title_warp{
			font-weight: 800;
			font-size: 40rpx;
			color: #111111;
		}
		._info_content_invitation{
			font-size: 24rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
		}
		._info_content_msg_warp{
			font-size: 22rpx;
			color: #666666;
			margin-top: 6rpx;
		}
	}
  
	
  
	.other_warp{
		margin-top: 50rpx;
		.other_title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
		.other_function{
			margin-top: 30rpx;
			.other_function_item{
				margin-top: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.function_item_left{
				display: flex;
				align-items: center;
			}
			.function_item_left_title{
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				margin-left: 10rpx;
			}
		}
	}
	.logout-warp{
		display: flex;
		justify-content: center;
	}
	.but_comm_warp{
		border-radius: 20rpx;
		margin-top: 100rpx;
		width: 60%;
		padding: 18rpx 0;
		background: #F3F3F3;
		border: 0rpx solid #3D3D3D;
		font-size: 28rpx;
		color: #666666;
	}
  }
</style>
